body {
  overflow: hidden;
}

@import './theme.less';

@head-height: 49px;
@sticky-bar-width: 5px;

.page {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100vh;

  .head {
    display: flex;
    align-items: center;
    height: @head-height;
    background-color: #ffffff;
    border-bottom: 1px solid #e6e6e6;
    //margin-left: 5px;

    flex-shrink: 0;

    .headTitle {
      padding-left: 16px;
      font-size: 18px;
      font-weight: 500;
      // color: transparent;
      // background-image: linear-gradient(to right, #fa6400, #f6b352);
      // background-clip: text;
      letter-spacing: 1px;

      span {
        color: #f84810;
      }
    }
  }

  .view {
    height: calc(100vh - @head-height);
    margin-left: @sticky-bar-width;
    display: flex;
    flex-direction: column;

    overflow: auto;
    padding: 0px 30px;

    &::-webkit-scrollbar {
      width: 6px;
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      box-shadow: inset 0 0 5px rgba(182, 176, 176, 0.2);
      background: #EEF4FA; //滚动条颜色
    }

    &::-webkit-scrollbar-track {
      box-shadow: none;
      border-radius: 4px;
      background: transparent; //底色
    }
  }

  .body {
    flex: 1;
  }

  .foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
  }
}


@borderRadius: 6px;

.title() {
  color: #555;
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  text-align: center;

  label {
    color: @color-primary;
    font-weight: 600;
  }
}

.underline() {
  border-bottom: 1px solid @color-primary;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10vh;

  .form {
    width: 100%;
    max-width: 360px;

    .title {
      .title();
      margin-bottom: 30px;
    }

    input {
      background-color: rgb(250, 250, 250);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px inset;
    }

    input[type='text'],
    input[type='password'] {
      border: 1px solid #e6e8eb;
      border-radius: @borderRadius;
      height: 40px;
      width: 100%;
      display: block;
      margin-bottom: 20px;
      padding-left: 15px;
      padding-right: 15px;
      box-sizing: border-box;
    }

    input[type='text'].err,
    input[type='password'].err {
      border-color: #fc3232;
    }

    .codeRow {
      display: flex;
      align-items: flex-start;

      input {
        flex: 1;
      }

      button {
        margin-left: 12px;
        height: 40px;
        width: 60px;
        border: 1px solid @color-primary;
        color: @color-primary;
        vertical-align: middle;
        border-radius: @borderRadius;
        box-sizing: border-box;

        cursor: pointer;
      }

      button[disabled] {
        opacity: 0.5;
      }
    }

    .submit {
      border-radius: 25px;
      height: 45px;
      width: 100%;

      //background: radial-gradient(#c42d01 0%, #c42d01 10%, #fcf26e 40%, #00e754 60%, #00eef4 70%, #0070f3 100%);
      background: radial-gradient(@color-primary 0%, @color-primary 10%, #fcf26e 40%, #00e754 60%, #00eef4 70%, #d519d2 100%);
      background-size: 300% 300%;
      padding: 3px;
      //border-radius: 32px;
      animation: shining 10s linear infinite;
      will-change: background-position;
      overflow: hidden;
      box-shadow: rgba(0, 0, 0, 0.1) -1px 2px 2px 1px;

      &.visible {
        background: @color-primary;
      }

      > button {
        cursor: pointer;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        width: 100%;
        height: 100%;
        //margin: 2px;
        background: rgba(255, 255, 255, 0.1);
      }
    }

    .errMsg {
      color: #fc3232;
      margin-top: 10px;
    }

    .toolbar {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .toggleButton {
        cursor: pointer;
        color: @color-primary;
        font-weight: 500;
      }
    }
  }


  .others {
    width: 100%;
    padding: 20px 0px;

    .otherLine {
      width: 100%;
      position: relative;

      display: flex;
      align-items: center;
      justify-content: center;

      .line {
        height: 1px;
        background: #eeeff1;
        width: 100%;
        position: absolute;
      }

      .text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        // height: 100%;
        font-weight: 500;
        font-size: 12px;
        color: rgba(47, 46, 63, 0.45);
        background: #fff;
        z-index: 1;
      }

    }

    .entries {
      padding-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        cursor: pointer;
      }

      .switch {
        font-size: 13px;
        color: @color-primary;
        cursor: pointer;
        font-weight: 500;

        transition: all 0.3s ease-in-out;

        text-decoration: underline;

        &:hover {
          color: @color-secondary;
        }
      }
    }
  }
}

.links {
  display: flex;
  align-items: center;
  word-break: initial;

  a {
    margin: 8px 10px;
    color: #95999e;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 16px;

    color: rgba(0, 0, 0, 0.55);

    transition: color 200ms ease 0s;

    svg {
      max-height: 16px;
      max-width: 16px;
      margin-right: 4px;

      path {
        transition: fill 200ms ease 0s;
        fill: rgba(0, 0, 0, 0.55);
      }
    }

    &:hover {
      color: rgba(0, 0, 0);
    }
  }

  .github:hover {
    color: #222222;

    svg {
      path {
        fill: #222222;
      }
    }
  }

  .vscode:hover {
    color: #2596e7;

    svg {
      path {
        fill: #2596e7;
      }
    }
  }

  .copyright {
    color: @color-primary;

    &:hover {
      color: @color-primary;
    }
  }
}

.mutiText {
  .text {
    font-weight: 400;
    color: #000000;
    text-decoration: none !important;
  }

  .subText {
    font-weight: 500;
    cursor: pointer;
    color: @color-primary;
    text-decoration: underline;
  }
}

@keyframes shining {
  0% {
    background-position: -20% -20%;
  }

  25% {
    background-position: 30% 80%;
  }

  50% {
    background-position: 110% 110%;
  }

  75% {
    background-position: 80% 30%;
  }

  to {
    background-position: -20% -20%;
  }
}